<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="no-cache">
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta name="format-detection" content="telephone=no">
  <title>webBasic-css</title>
</head>
<body>
<script>
let css=`
两种盒模型  
	ie和w3c标准盒模型  
	ie content部分把border和padding计算进去了
css隐藏元素方法  
	display:none   
	visibility:hidden  
	position:absolute left:-9999     
	opacity:0
清除浮动  
	浮动盒子下面放一个标签clear:both 
	overflow:hidden  
	伪元素清除 
	display:table
页面导入样式link和@import区别  
	link属于html标签，@import是css中提供的  
	link会同时被加载，@import则在页面加载完成后才会加载引用  
	link没有兼容问题，而且Link引入样式权重大于@import引用
伪元素和伪类区别  
	伪元素两个冒号 ::before  ::after  
	伪类:hover  :active   :focus  ：first   :first-letter
css选择符有哪些？哪些属性可继承？优先级如何？   
	id  class 标签div h1 p  相邻选择器h1+p  子选择器ul li 后代选择器 li a  通配符*  属性选择器input['type=radio']  伪类选择器 a:hover      
	可继承：font-size font-family color   
	不可继承：border padding  margin  width  height   
	优先级：!import>id>class >p标签 >*  
	css新增伪类  :checked   :enabled  :disabled  p:nth-child(3n+1)
默认有inline-block元素有哪些  
	input  img  button  textarea  label
rgba()和opacity透明有什么不同  
	rgba()只作用于元素颜色或背景色，opacity作用于元素和元素内所有内容
px和em  
	px是固定大小，em不是固定，em会继承父级元素字体大小
如何垂直居中  
	1、position:absolute left:50%;top:50%;margin-left margin-top负一半  
	2、position:absolute left:50% top:50% transform:translate(-50%,-50%)   
	3、position:absolute;left:0;top:0;right:0;bottom:0;margin:auto  
	4、display:flex;justify-content:center;align-items:center
img最简单居中的方法 
	 display:table-cell;text-align:center;vertical-align:middle
chrome支持小于12px的字  
	-webkit-transform:scale(0.5)
css有哪些新特性  
	选择器nth-child(n)  多背景图   word-wrap:break-word   text-shadow   @font-face   border-radius   border-image   box-shadow  box-sizing   @media   @keyframes   animation  gradient   display:flex  transition 
css变换  
	rotate()  translate()  scale()   skew()   3d
`





</script>
</body>
</html>
